<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="./scss/header.css">
    <link rel="stylesheet" href="./scss/footer.css">
    <link rel="stylesheet" href="../图标图标/iconfont.css">
    <link rel="stylesheet" href="./scss/productdetail.css">
    <style>
        .main-left {
            position: relative;
            /* background-color: chartreuse; */
        }

        .focus {
            width: 100px;
            height: 100px;
            background: black;
            opacity: 0.5;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        .big-img {
            /* background-color: coral; */
            position: absolute;
            left: 482px;
            top: 204px;
            width: 350px;
            height: 350px;
            overflow: hidden;
            display: none;
        }
        /* 要设置好图片的比例大小，不然会被盒子大小锁死，不能跟着百分比适应屏幕 */
        .big-img img{
            position: absolute;
            left: 0;
            top: 0;
            width: 1225px;
            height: 1225px;
        }
    </style>
</head>

<body>
    <!-- 第一部分，头部导航栏 -->
    <header>
        <div class="container">
            <p>收藏</p>
            <ul class="uu">
                <li>
                    <a href="./login.html" class="login">你好，请登录</a>
                    &nbsp;&nbsp;
                    <a href="./register.html" class="regist">免费注册</a>
                </li>
                <li>会员中心</li>
                <li style="font-size: 14px; color: #666; font-weight: normal;">客户服务</li>
            </ul>
        </div>
    </header>
    <!-- 第二部分，头部搜索部分 -->
    <div class="header-part">
        <!-- 版心 -->
        <div class="header-cen">
            <!-- logo -->
            <div class="logo-img">
                <a href="./shouye.html"><img src="./images/letvlogo.df7e18e.png" alt=""></a>
            </div>
            <!-- 搜索栏 -->
            <div id="serch">
                <div class="serch-int">
                    <input type="text" name="" class="text">
                    <button class="button">搜索</button>
                </div>
                <p>
                    热门搜索：
                    <span>量子点</span>
                    <span>遥控器</span>
                    <span style="font-size: 12px; color: #666; font-weight: normal;">无限耳机</span>
                </p>
            </div>
            <!-- 购物车 -->
            <h1>
                <span class="iconfont icon-gouwuche"></span>
                <p><a href="">我的购物车</a></p><span class="iconfont icon-triangle-down"></span>
                <div id="shopp">
                    <p>购物车中还没有商品，赶紧选购吧</p>
                </div>
            </h1>
        </div>
    </div>
    <!-- 第三部分，商品分类 -->
    <div class="nav">
        <div class="nav-cen">
            <a href="./goodslist.html">全部商品分类</a>

        </div>
    </div>
    <!-- 主体部分，商品详情 -->
    <section>
        <main>
            <div class="mainbox">
                <div class="main-left">
                    <!-- 放大镜焦点 -->
                    <div class="focus"></div>
                    <img id="logo1" src="" alt="">
                </div>
                <!-- 放大镜出现的大图 -->
                <div class="big-img">
                    <img id="logo" src="" alt="">
                </div>
                <div class="main-cen">
                    <h1 id="title"></h1>
                    <div class="pricebox">
                        <span style="font-weight:normal;color:#333">商 城 价 ：</span>
                        <span>¥</span>
                        <span id="p-price"></span>
                    </div>
                    <div class="summary">
                        <div class="summary-top">
                            <span>促销信息:</span>
                            <span>立减</span>
                            <span>下单即享20元优惠</span>
                        </div>
                        <p class="summary-cen">服&emsp;&emsp;务：由乐视商城官方旗舰店 发货并提供售后服务 </p>
                        <p class="summary-bot">
                            <span>配&nbsp;送&nbsp;至:</span>
                            <span>北京</span>
                            <span>付款成功后，预计7天内发货</span>
                        </p>

                    </div>
                    <div class="input-box">
                        <button>立即购买</button>
                        <button>加入购物车</button>
                        <button>收藏</button>
                    </div>
                </div>
                <div class="main-right">
                    <!-- 商店名 -->
                    <p class="seller-infor">乐视商城官方旗舰店</p>
                    <p class="score-title">商家满意度</p>
                    <!-- 评分 -->
                    <div class="seller-grade">
                        <p>商品描述：<span style="color: orangered;">5.0</span>分</p>
                        <p>服务态度：<span style="color: orangered;">5.0</span>分</p>
                        <p>发货速度：<span style="color: orangered;">5.0</span>分</p>                 
                    </div>
                    <!-- 商铺详情 -->
                    <div class="shop-detail">
                        <p>店铺名称：<span style="color: #666;">乐视商城官方旗舰店</span></p>
                        <p>所&emsp;在&emsp;地</p>
                    </div>
                    <div class="service">
                        <p>联&nbsp;系&nbsp;客&nbsp;服</p>
                        <p>在线客服</p>
                    </div>
                    <div class="shop-enter">
                        <button>进入店铺</button>
                        <button>收藏店铺</button>
                    </div>
                </div>
            </div>
        </main>
        <div class="bot">
            <div class="detail"></div>
        </div>
4
    </section>

    <!-- 最后部分，尾部 -->
    <footer style="float: left;">
        <div id="footer-top">
            <div class="top-cont">
                <img src="./images/footer1.jpeg" alt="">
                <img src="./images/footer2.jpeg" alt="">
                <img src="./images/footer3.jpeg" alt="">
                <img src="./images/footer4.jpeg" alt="">
            </div>
        </div>
        <div id="footer-cen">
            <ul>
                <li>
                    <dl>
                        <dt>新手入门</dt>
                        <dd><i></i> <a href="/#/news/article?id=11" title="购物指南">购物指南</a></dd>
                        <dd><i></i> <a href="/#/news/article?id=30" title="发票说明">发票说明</a></dd>
                        <dd><i></i> <a href="/#/news/article?id=47" title="账户安全">账户安全</a></dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>帮助中心</dt>
                        <dd><i></i> <a href="/#/news/article?id=9" title="签收必读（超级电视）">签收必读（超级电视）</a></dd>
                        <dd><i></i> <a href="/#/news/article?id=7" title="配送时效">配送时效</a></dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>售后服务</dt>
                        <dd><i></i> <a href="/#/news/article?id=31" title="关于电视安装（自营）">关于电视安装（自营）</a></dd>
                        <dd><i></i> <a href="/#/news/article?id=32" title="电视三包政策（自营）">电视三包政策（自营）</a></dd>
                        <dd><i></i> <a href="/#/news/article?id=34" title="电视售后维修政策（自营）">电视售后维修政策（自营）</a></dd>
                        <dd><i></i> <a href="/#/news/article?id=51" title="乐视生态产品售后政策">乐视生态产品售后政策</a></dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>特色服务</dt>
                        <dd><i></i> <a href="http://lema.lemall.com/lema.html?alys_id=top&amp;ref=cn:yw_fw_6"
                                title="乐码通道">乐码通道</a></dd>
                        <dd><i></i> <a href="https://lemall.letv.com" title="乐视商城B2B2C商城系统">乐视商城B2B2C商城系统</a></dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>关于我们</dt>
                        <dd><i></i> <a href="/#/news/article?id=39" title="公司介绍">公司介绍</a></dd>
                        <dd><i></i> <a href="/#/news/article?id=40" title="联系我们">联系我们</a></dd>
                        <dd><i></i> <a href="/#/news/article?id=41" title="关注我们">关注我们</a></dd>
                        <dd><i></i> <a href="/#/news/article?id=53" title="隐私政策">隐私政策</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <div id="footer-rig">
            Copyright © 2004-2020 乐视商城 All rights reserved
            <span> | </span>
            <a href="http://beian.miit.gov.cn" target="_blank" class="license">京ICP备19019019号-1</a>
            <span>|</span>
            <img alt="京公网安备" src="https://i2.letvimg.com/lc06_img/201602/29/16/21/ghs.png">
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502041858" target="_blank"
                class="license">京公网安备：11010502041858号</a>
            <span> | </span>
            <a target="_blank" href="http://img0-lemall.letvimg.com/le-cloud/resource/images/www/201910251813.png"
                class="license">营业执照信息</a>
        </div>
    </footer>

    <script src="./js/handglass.js"></script>
    <script src="./js/ajax.js"></script>
    <script>
        function getId() {
            return location.hash.split("=")[1];
        }

        // 当页面加载结束之后直接向服务端发起请求; 
        window.onload = function () {
            ajax({
                url: "http://127.0.0.1:8888/goods/item/" + getId(),
                callback: render
            })
        }

        var logo = document.getElementById('logo');
        var logo1 = document.getElementById('logo1');

        var detail = document.querySelector(".detail");
        var title = document.getElementById("title");
        var p_price = document.getElementById("p-price")

        function render(res) {
            res = JSON.parse(res);
            console.log(res);
            logo.src = res.info.img_big_logo;
            logo1.src = res.info.img_big_logo;
            detail.innerHTML = res.info.goods_introduce;
            title.innerHTML = res.info.title;
            p_price.innerHTML = res.info.price
        }

    </script>
</body>

</html>